<template>
 <div>
  <Goods 
  :goodList="goodList" 
  @addNum='addNum'
  @minusNum='minusNum'
  @deleteItem='deleteItem'
  @checkAll='checkAll'
  @changeChecked='changeChecked'
  :allPrice='allPrice'
  />
 </div>
</template>

<script>
import Goods from './components/Goods'
export default {
  components:{Goods},
  data() {
    return {
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    };
  },
  methods:{
    addNum(childrenIndex){
      this.goodList.forEach((item,index)=>childrenIndex==index&&item.num++)
    },
    minusNum(childrenIndex){
      this.goodList.forEach((item,index)=>childrenIndex==index&&item.num>0&&item.num--)
    },
    deleteItem(childrenIndex){
      this.goodList=this.goodList.filter((item,index)=>index!=childrenIndex)
    },
    checkAll(checked){
      this.goodList.forEach(item=>item.checked=checked)
    },
    changeChecked(childrenIndex){
      this.goodList.forEach((item,index)=>childrenIndex==index&&(item.checked=!item.checked))
    }
  },
  computed:{
    allPrice(){
      let num=0
      this.goodList.forEach(item=>item.checked&&(num+=item.price*item.num))
      return num
    }
  }
};
</script>

<style>
</style>